<template>
  <div>
    <div class="home-news-header">
      <div class="home-news-title">
        <div class="left">
          <i v-if="title"></i>
          {{title}}
        </div>
        <div class="right">
          <i class="news-icon-pre" @click="pagePre" :style="current==1?'opacity: 0.2;':''"></i>
          <i class="news-icon-next" @click="pageNext" :style="current==pages?'opacity: 0.2;':''"></i>
        </div>
      </div>
    </div>
    <div class="home-news-body">
      <div class="news-link" v-for="record in currentRecord" :key="record.path">
        <a class="news-link-title" :href="record.path">{{record.title}}</a>
        <a class="news-link-second" :href="record.path">{{record.second}}</a>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  @Prop({ default: "" }) title!: string;
  @Prop({ default: [], required: true }) records!: Array<Object>;
  @Prop({ default: 0 }) size!: number; //分页大小-默认为0
  current: number = 1; //当前页数

  currentRecord: {}[] = [];

  created() {
    this.paging();
  }
  get pages() {
    return this.records.length / this.size;
  }

  paging() {
    this.currentRecord = [];
    this.currentRecord = this.records.slice(
      (this.current - 1) * this.size,
      this.size * this.current
    );
  }
  pagePre() {
    if (this.current > 1) {
      this.current = this.current - 1;
    }
    this.paging();
  }
  pageNext() {
    if (this.current < this.pages) {
      this.current = this.current + 1;
    }
    this.paging();
  }
}
</script>

<style lang='less' scoped>
.home-news-header {
  .home-news-title {
    height: 26px;
    margin-bottom: 10px;
    .flex-box(row, space-between);
    .left {
      height: 100%;
      font-size: 16px;
      font-weight: bolder;
      .flex-box(row, flex-start);
      i {
        .wh(24px);
        display: inline-block;
        background: url("~@/assets/images/home/hots-icon.png");
        background-repeat: no-repeat;
        background-size: cover;
        margin-right: 5px;
      }
    }
  }
  .news-icon-pre {
    .wh(10px, 20px);
    display: inline-block;
    background: url("~@/assets/images/home/pre.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 5px;
    cursor: pointer;
  }
  .news-icon-next {
    .wh(10px, 20px);
    display: inline-block;
    background: url("~@/assets/images/home/next.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 5px;
    cursor: pointer;
  }
  //   .home-news-icon {
  //     .wh(24px);
  //     display: inline-block;
  //     background: url("~@/assets/images/home/news-icon.png");
  //     background-repeat: no-repeat;
  //     background-size: cover;
  //     margin-right: 5px;
  //   }
}
.home-news-body {
  width: 200px;
  img {
    width: 100%;
  }
}
.news-link {
  margin-top: 15px;

  .wh(100%, 50px);
  .flex-box(column, flex-start, flex-start);

  text-decoration: none;

  .news-link-title {
    width: 200px;
    margin-top: 5px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #000;
    font-size: 16px;
  }
  .news-link-second {
    width: 200px;
    margin-top: 5px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #999;
  }
}
</style>